<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emmet语法快速生成html标签和样式</title>
    <style>
        .one {
            /* 首字母 */
            /* tac+TAB */
            text-align: center;
            /* ti2em+TAB */
            text-indent: 2em;
            /* w100px+TAB */
            width: 100px;
            /* 下同 */
            height: 190px;
            line-height: 26px;
            line-height: 26px;
        }
    </style>
</head>

<body>
    <!-- div+TAB -->
    <div></div>
    <!-- 想多几个 直接 div*5+TAB -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- 同理 -->
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <!-- 父子级关系的 用 > +TAB-->
    <ul>
        <li></li>
    </ul>
    <ol>
        <li></li>
    </ol>
    <!-- 兄弟关系 用 + +TAB -->
    <div></div>
    <p></p>

    <p></p>
    <h1></h1>
    <!-- 如果想生成带有类名或id名的，直接 .demo 或者 #two +TAB键 -->
    <div class="btn"></div>
    <div id="three"></div>
    <div class="nav"></div>
    <!-- 或者是其他标签想带有类名或id名的，直接 标签名.demo 或 标签名#two +TAB-->
    <p class="gay"></p>
    <!-- a.boy -->
    <a href="" class="boy"></a>
    <h1 id="two"></h1>
    <!-- ul>li#gray -->
    <ul>
        <li id="gray"></li>
    </ul>
    <!-- ol>li.yellow -->
    <ol>
        <li class="yellow"></li>
    </ol>
    <!-- 如果生成的div类名是有顺序的，可以用自增符号 $  +TAB-->
    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- li{$}*5 -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <!-- 我们想生成的标签里驱魔人几个字 用{}括起来 + TAB -->
    <!-- div{pink老师不是gay} -->
    <div>pink老师不是gay</div>
    <div>我不喜欢男人</div>
    <!-- div{我不喜欢男人}*5 -->
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <div>我不喜欢男人</div>
    <!-- div{$}*6 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>

</html>